<script setup lang="ts">
import CommonDialog from "@/newComponents/CommonDialog.vue";
import FileAPI from "@/api/file";
import LzCategoryAPI from "@/api/content/lz-category";
import LzTagAPI from "@/api/content/lz-tag";

const dialogRef = ref();
const mdRef = ref();
const categoryList = ref<any[]>();
const tagList = ref<any[]>();
const status = ref("0");

// 绑定@imgAdd event
function addImg(pos: any, file: any) {
  // 第一步.将图片上传到服务器.
  FileAPI.uploadFile(file)
    .then((response: any) => {
      mdRef.value.$img2Url(pos, response.url);
    })
    .catch((error: any) => {
      console.log(error);
    });
}

// 获取分类列表
async function toGetCategoryList() {
  LzCategoryAPI.getAll().then((response: any) => {
    categoryList.value = response;
  });
}

// 获取标签列表
async function toGetTagList() {
  LzTagAPI.getAll().then((response: any) => {
    tagList.value = response;
  });
}

const beforeSubmit = (obj: any) => {
  obj.status = status.value;
};

const changeStatus = () => {
  status.value = "1";
  dialogRef.value?.handleSubmit();
};

// 暴露 open 方法，让爷爷组件可以调用
const open = async (row: any) => {
  await toGetCategoryList();
  await toGetTagList();
  // 重置文章状态
  status.value = "0";
  dialogRef.value?.open(row);
};

defineExpose({ open });
</script>

<template>
  <common-dialog
    v-bind="{ ...$props, ...$attrs }"
    ref="dialogRef"
    :beforeSubmit="beforeSubmit"
    style="width: 1200px"
  >
    <template #dialogFormContent="{ formData }">
      <el-row>
        <el-col :span="8">
          <el-form-item label="标题" prop="name">
            <el-input v-model="formData.title" placeholder="请输入文章标题" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分类">
            <el-select v-model="formData.categoryId" placeholder="请选择">
              <el-option
                v-for="category in categoryList"
                :key="category.id"
                :label="category.name"
                :value="category.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签">
            <el-select v-model="formData.tagIds" placeholder="请选择" multiple>
              <el-option v-for="tag in tagList" :key="tag.id" :label="tag.name" :value="tag.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="文章摘要">
            <el-input v-model="formData.summary" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="允许评论">
            <el-radio-group v-model="formData.isComment">
              <el-radio :key="'0'" :label="'0'">正常</el-radio>
              <el-radio :key="'1'" :label="'1'">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否置顶">
            <el-radio-group v-model="formData.isTop">
              <el-radio :key="'0'" :label="'0'">是</el-radio>
              <el-radio :key="'1'" :label="'1'">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="缩略图">
        <single-image-upload v-model="formData.thumbnail" />
      </el-form-item>

      <mavon-editor ref="mdRef" v-model="formData.content" @imgAdd="addImg" />
    </template>
    <template #extraButtons>
      <el-button type="success" @click="changeStatus">存为草稿</el-button>
    </template>
  </common-dialog>
</template>

<style scoped lang="scss"></style>
